{% extends "base.html" %}
{% block title %}
登录
{% endblock %}
{% block ext_css %}
    <style>
    .login{
        background: url("/static/img/bg3.png#234") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
    .no_border{
        border-color: crimson;
        border-left-width: 0;
        border-right-width: 0;
        border-top-width: 0;
        display: block;
        width: 100%;
        background-color:rgba(0, 0, 0, 0.0);
        border-radius: 0;
    }
    </style>
{% endblock %}
{% block ext_script %}
    <script>
    $(function () {
        $("#login_form").submit(function (e) {
            e.preventDefault();
            const data = $(this).serializeArray();
            $.post('{{ url_for('www.show_login') }}', {mobile:data[0].value, password:data[1].value}, function (d) {
                if (d.code === 200){
                    location.href = '{{ url_for("www.logined") }}'
                }else{
                    alert('电话或者密码错误')
                }
            }, 'json')

        })
    })
    </script>

{% endblock %}
{% block content %}
    <div class="viewport login">
        <form id="login_form" method="POST" style="width: 90%; padding:5vw; text-align: left;margin:auto">
          <div class="form-group">
            <label for="mobile">注册电话:</label>
            <input name="mobile" type="text" class="no_border" id="mobile" required>
          </div>
          <div class="form-group">
            <label for="password">登录密码:</label>
            <input name="password" type="password" class="no_border" id="password" required>
          </div>
          <div style="text-align: center; padding: 5vw">
          <button type="submit" class="btn btn-danger" style="width:60%">登录</button>
          </div>
         </form>


    </div>

{% endblock %}